<template>
	<view>
		<view class="px-4 py-2 d-flex bg-white">
			<view class="flex-1 d-flex j-center tab border border-theme font-theme-color sechecklling border-right-0"
				@tap="onTabTap(TabEnum.sechecklling)"
				:class="selectedTab == TabEnum.sechecklling ? 'text-white bg-theme' : 'font-theme-color bg-white'">
				抢购中
			</view>
			<view class="flex-1 d-flex j-center tab border border-theme font-theme-color seckillwill"
				@tap="onTabTap(TabEnum.seckillwill)"
				:class="selectedTab == TabEnum.seckillwill ? 'text-white bg-theme' : 'font-theme-color bg-white'">
				即将开抢
			</view>
		</view>
		<view v-if="selectedTab == TabEnum.sechecklling">
			<seckill-card @click="onSeckillCardTap(index)" v-for="(goods, index) in goods_list.filter(good => good.type === 1)" :goods="goods" :key="goods.title"></seckill-card>
		</view>
		<view v-else>
			<seckill-card @click="onSeckillCardTap(index)" :type="TabEnum.seckillwill" v-for="goods in goods_list.filter(good => good.type === 2)" :goods="goods" :key="goods.title"></seckill-card>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { TabEnum } from './types'
	import SeckillCard from './components/seckill-card.vue'
	let selectedTab = ref(TabEnum.sechecklling)
	let goods_list = ref([
		{
			id: 1,
			title: '1多美卡TOMY合金小汽车模型玩具头文字D藤原拓海AE86新年礼物486466',
			tags: ['1多美卡', '合金', '模型', '玩具', '头文字D', '藤原拓海', 'AE86', '新年礼物', '486466'],
			seckill_price: 999,
			origin_price: 1000,
			type: 1,
			photo: '/static/product/ae86.jpg'
		},
		{
			id: 2,
			title: '2多美卡TOMY合金小汽车模型玩具头文字D藤原拓海AE86新年礼物486466',
			tags: ['2多美卡', '合金', '模型', '玩具', '头文字D', '藤原拓海', 'AE86', '新年礼物', '486466'],
			seckill_price: 999,
			origin_price: 1000,
			type: 2,
			photo: '/static/product/ae86.jpg'
		},
		{
			id: 3,
			title: '2多美卡TOMY合金小汽车模型玩具头文字D藤原拓海AE86新年礼物486466',
			tags: ['2多美卡', '合金', '模型', '玩具', '头文字D', '藤原拓海', 'AE86', '新年礼物', '486466'],
			seckill_price: 999,
			origin_price: 1000,
			type: 2,
			photo: '/static/product/ae86.jpg'
		},
		{
			id: 4,
			title: '1多美卡TOMY合金小汽车模型玩具头文字D藤原拓海AE86新年礼物486466',
			tags: ['1多美卡', '合金', '模型', '玩具', '头文字D', '藤原拓海', 'AE86', '新年礼物', '486466'],
			seckill_price: 999,
			origin_price: 1000,
			type: 1,
			photo: '/static/product/ae86.jpg'
		}
	])
	const onTabTap = (index) => {
		selectedTab.value = index
	}
	const onSeckillCardTap = (index) => {
		console.log(index);
		
		uni.navigateTo({
			url: `/pages/goods/goods`
		})
	}
</script>

<style scoped lang="scss">
	.tab {
		height: 60rpx;
		line-height: 60rpx;
	}
	$bodrderRedius: 10rpx;
	.sechecklling {
		border-start-start-radius: $bodrderRedius;
		border-end-start-radius: $bodrderRedius;
	}
	.seckillwill {
		border-start-end-radius: $bodrderRedius;
		border-end-end-radius: $bodrderRedius;
	}
</style>